<template>
    <div>
        <div class="contant">
            <el-tabs
                v-model="activeName"
                class="demo-tabs"
                @tab-click="handleClick"
            >
                <el-tab-pane
                    label="污泥处理厂"
                    name="first"
                >
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        highlight-current-row
                        :cell-style="{ 'text-align': 'center' }"
                        :header-cell-style="headerCellStyle"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column
                            prop="plantName"
                            label="所属单位"
                            width="140"
                        />
                        <el-table-column
                            prop="address"
                            label="详细地址"
                        />
                        <el-table-column
                            prop="contactName"
                            label="联系人"
                            width="140"
                        />
                        <el-table-column
                            prop="phone"
                            label="联系方式"
                            width="140"
                        />
                        <el-table-column
                            label="操作"
                            width="140"
                            fixed="right"
                        >
                            <template #default="scope">
                                <el-button
                                    type="primary"
                                    :icon="View"
                                    size="small"
                                    @click="handleDetail(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="primary"
                                    :icon="Edit"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane
                    label="转运目的地"
                    name="second"
                >
                    <div class="operatingArea">
                        <div class="filter">
                            <div class="filter-item">
                                <el-input
                                    v-model="searchForm.destinationName"
                                    placeholder="转运目的地"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-input
                                    v-model="searchForm.contactName"
                                    placeholder="联系人"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-input
                                    v-model="searchForm.phone"
                                    placeholder="联系电话"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-button
                                    type="primary"
                                    @click="searchTarget"
                                >查询</el-button>
                                <el-button
                                    type="primary"
                                    @click="resetTarget"
                                >重置</el-button>
                            </div>
                        </div>
                        <div class="addBtn">
                            <el-button
                                type="primary"
                                :icon="Plus"
                                :disabled="isSupervisor"
                                @click="handleAddTarget"
                            >新增</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableDataTarget"
                        style="width: 100%"
                        highlight-current-row
                        :cell-style="{ 'text-align': 'center' }"
                        :header-cell-style="headerCellStyle"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column
                            prop="depId"
                            label="所属单位"
                            width="120"
                        >
                            <template #default="scope">
                                {{ depNameTranslate(scope.row.depId) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="destinationName"
                            label="转运目的地"
                            width="160"
                        />
                        <el-table-column
                            prop="address"
                            sortable
                            label="详细地址"
                        />
                        <el-table-column
                            prop="contactName"
                            label="联系人"
                            width="80"
                        />
                        <el-table-column
                            prop="phone"
                            label="联系方式"
                            width="120"
                        />
                        <el-table-column
                            label="操作"
                            width="140"
                            fixed="right"
                        >
                            <template #default="scope">
                                <el-button
                                    type="primary"
                                    :icon="View"
                                    size="small"
                                    @click="handleDetailTarget(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="primary"
                                    :icon="Edit"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleEditTarget(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="danger"
                                    :icon="Delete"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleDeleteTarget(scope.$index, scope.row)"
                                >
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-model:current-page="searchForm.pageNo"
                        v-model:page-size="searchForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[10, 20, 50, 100, 200]"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        class="equipmentPagination"
                    />
                </el-tab-pane>
                <el-tab-pane
                    label="运输单位"
                    name="third"
                >
                    <div class="operatingArea">
                        <div class="filter">
                            <div class="filter-item">
                                <el-input
                                    v-model="searchFormUnit.transportDepName"
                                    placeholder="运输单位"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-input
                                    v-model="searchFormUnit.contactName"
                                    placeholder="联系人"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-input
                                    v-model="searchFormUnit.phone"
                                    placeholder="联系电话"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-button
                                    type="primary"
                                    @click="searchUnit"
                                >查询</el-button>
                                <el-button
                                    type="primary"
                                    @click="resetUnit"
                                >重置</el-button>
                            </div>
                        </div>
                        <div class="addBtn">
                            <el-button
                                type="primary"
                                :icon="Plus"
                                :disabled="isSupervisor"
                                @click="handleAddUnit"
                            >新增</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableDataUnit"
                        style="width: 100%"
                        highlight-current-row
                        :cell-style="{ 'text-align': 'center' }"
                        :header-cell-style="headerCellStyle"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column
                            prop="depId"
                            label="所属单位"
                        >
                            <template #default="scope">
                                {{ depNameTranslate(scope.row.depId) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="transportDepName"
                            label="运输单位"
                        />
                        <el-table-column
                            prop="aptitude"
                            label="资质"
                            min-width="220px"
                        />
                        <el-table-column
                            prop="vehicleNumber"
                            label="营运车辆数量"
                        />
                        <el-table-column
                            prop="driverNumber"
                            sortable
                            label="驾驶员人数"
                        />
                        <el-table-column
                            prop="contactName"
                            label="联系人"
                        />
                        <el-table-column
                            prop="phone"
                            label="联系方式"
                        />
                        <el-table-column
                            label="操作"
                            width="140"
                            fixed="right"
                        >
                            <template #default="scope">
                                <el-button
                                    type="primary"
                                    :icon="View"
                                    size="small"
                                    @click="handleDetailUnit(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="primary"
                                    :icon="Edit"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleEditUnit(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="danger"
                                    :icon="Delete"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleDeleteUnit(scope.$index, scope.row)"
                                >
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-model:current-page="searchFormUnit.pageNo"
                        v-model:page-size="searchFormUnit.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[10, 20, 50, 100, 200]"
                        :total="totalUnit"
                        @size-change="handleSizeChangeUnit"
                        @current-change="handleCurrentChangeUnit"
                        class="equipmentPagination"
                    />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="1000px"
    >
        <div class="dialogContent">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                :inline="true"
                :disabled="dialogType == 'detail'"
            >
                <div class="baseInfo sludgemodel">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="所属单位"
                                prop="depId"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleForm.depId"
                                    placeholder="请选择"
                                    disabled
                                >
                                    <el-option
                                        v-for="item in depIdList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="联系人"
                                prop="contactName"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.contactName"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="联系方式"
                                prop="phone"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.phone"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                label="详细地址"
                                prop="address"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.address"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="confirm"
                    v-show="dialogType != 'detail'"
                >
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog
        v-model="dialogVisibleTarget"
        :title="dialogTitleTarget"
        width="1000px"
    >
        <div class="dialogContent">
            <el-form
                ref="ruleFormRef"
                :model="ruleFormTarget"
                :rules="rulesTarget"
                label-width="120px"
                class="demo-ruleForm"
                :inline="true"
                :disabled="dialogTypeTarget == 'detail'"
            >
                <div class="baseInfo sludgemodel">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="所属单位"
                                prop="depId"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleFormTarget.depId"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in depIdList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="联系人"
                                prop="contactName"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormTarget.contactName"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="联系方式"
                                prop="phone"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormTarget.phone"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="转运目的地"
                                prop="destinationName"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormTarget.destinationName"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item
                                label="详细地址"
                                prop="address"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormTarget.address"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisibleTarget = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="confirmTarget"
                    v-show="dialogTypeTarget != 'detail'"
                >
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog
        v-model="dialogVisibleUnit"
        :title="dialogTitleUnit"
        width="1000px"
    >
        <div class="dialogContent">
            <el-form
                ref="ruleFormUnitRef"
                :model="ruleFormUnit"
                label-width="120px"
                class="demo-ruleForm"
                :inline="true"
                :disabled="dialogTypeUnit == 'detail'"
            >
                <div class="baseInfo sludgemodel">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="所属单位"
                                prop="depId"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleFormUnit.depId"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in depIdList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="运输单位"
                                prop="transportDep"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormUnit.transportDepName"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="营运车辆数量"
                                prop="vehicleNumber"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormUnit.vehicleNumber"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="驾驶员人数"
                                prop="driverNumber"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormUnit.driverNumber"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="联系人"
                                prop="contactName"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormUnit.contactName"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="联系方式"
                                prop="phone"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormUnit.phone"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>

                <div class="sludgeInfo sludgemodel">
                    <div class="modelTitle">资质</div>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="营业执照"
                                prop="businessLicense"
                                class="demo-ruleForm-item"
                                :class="fileListBusinessLicense.length == '1' || dialogTypeUnit == 'detail' ? 'hiddenAddPic' : ''"
                                style="width: 100%;"
                            >
                                <el-upload
                                    v-model:file-list="fileListBusinessLicense"
                                    action="#"
                                    :http-request="(res) => {
                                        return uploadFileList(res, 'businessLicense');
                                    }"
                                    list-type="picture-card"
                                    :on-success="handleSuccessBusinessLicense"
                                    :on-remove="handleRemoveBusinessLicense"
                                    :on-preview="handlePictureCardPreview"
                                    :disabled="dialogTypeUnit == 'detail'"
                                    :limit="1"
                                >
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="道路运输经营许可证"
                                label-width="160    "
                                prop="roadTransport"
                                class="demo-ruleForm-item"
                                :class="fileListRoadTransport.length == '1' || dialogTypeUnit == 'detail' ? 'hiddenAddPic' : ''"
                                style="width: 100%;"
                            >
                                <el-upload
                                    v-model:file-list="fileListRoadTransport"
                                    action="#"
                                    :http-request="(res) => {
                                        return uploadFileList(res, 'roadTransport');
                                    }"
                                    list-type="picture-card"
                                    :on-success="handleSuccessRoadTransport"
                                    :on-remove="handleRemoveRoadTransport"
                                    :on-preview="handlePictureCardPreview"
                                    :disabled="dialogTypeUnit == 'detail'"
                                    :limit="1"
                                >
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="车辆营运证"
                                prop="vehicleOperation"
                                class="demo-ruleForm-item"
                                :class="fileListVehicleOperation.length == '1' || dialogTypeUnit == 'detail' ? 'hiddenAddPic' : ''"
                                style="width: 100%;"
                            >
                                <el-upload
                                    v-model:file-list="fileListVehicleOperation"
                                    action="#"
                                    :http-request="(res) => {
                                        return uploadFileList(res, 'vehicleOperation');
                                    }"
                                    list-type="picture-card"
                                    :on-success="handleSuccessVehicleOperation"
                                    :on-remove="handleRemoveVehicleOperation"
                                    :on-preview="handlePictureCardPreview"
                                    :disabled="dialogTypeUnit == 'detail'"
                                    :limit="1"
                                >
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisibleUnit = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="confirmUnit"
                    v-show="dialogTypeUnit != 'detail'"
                >
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog
        v-model="dialogPriviewVisible"
        width="800px"
    >
        <img
            style="width: 768px"
            :src="dialogImageUrl"
            alt="Preview Image"
        />
    </el-dialog>
</template>

<script setup>
import fileInfoHttp from "@/https/fileInfo.js";
import sludgePlantHttp from "@/https/sludgePlant.js";
import transportDepHttp from "@/https/transportDep.js";
import transportDestinationHttp from "@/https/transportDestination.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import {
    Delete,
    Edit,
    Plus,
    View
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
const isSupervisor = ref(false)
const roleNames = ref(Storage.localGet("roleNames"))
if (roleNames.value.includes('supervisor')) {
    isSupervisor.value = true
}
const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event)
}
const tableData = ref([])
const headerCellStyle = () => {
    let style = {
        background: '#f2f3f5',
        // color: '#fff',
        textAlign: 'center'
    }
    return style
}
const tableRowClassName = ({ row, rowIndex }) => {
    if ((rowIndex + 1) % 2 === 0) {
        // return 'warning-row'
    }
    return ''
}

const filterHandler = (
    value,
    row,
    column
) => {
    const property = column['property']
    return row[property] === value
}

const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙处理厂", value: "2" },
    { label: "城西处理厂", value: "3" },
    { label: "城北处理厂", value: "4" },
    { label: "城南处理厂", value: "5" },
    { label: "城东处理厂", value: "6" },
]);
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
// 污泥处理厂
const search = async () => {
    const res = await sludgePlantHttp.pageList({})
    console.log(res.data)
    if (res.data.code == 200) {
        tableData.value = res.data.data.records
    }
}
let ruleForm = ref({
    depId: '',
    contactName: '',
    phone: '',
    address: '',
})
const dialogVisible = ref(false)
const dialogType = ref('')
const dialogTitle = ref('')
const handleAdd = () => {
    dialogVisible.value = true
    dialogType.value = 'add'
    dialogTitle.value = '新增'
}
const handleDetail = (index, row) => {
    dialogVisible.value = true
    dialogType.value = 'detail'
    dialogTitle.value = '详情'
    ruleForm.value = { ...row }
    ruleForm.value.depId = row.depId + ''
}
const handleEdit = (index, row) => {
    dialogVisible.value = true
    dialogType.value = 'edit'
    dialogTitle.value = '编辑'
    ruleForm.value = { ...row }
    ruleForm.value.depId = row.depId + ''
}
const handleDelete = (index, row) => { }
const confirm = async () => {
    const res = await sludgePlantHttp.updatePlant(ruleForm.value)
    console.log(res.data)
    if (res.data.code == 200) {
        ElMessage({
            message: "修改成功",
            type: "success",
        });
        dialogVisible.value = false
        search()
    }
}
// 转运目的地
const searchForm = ref({
    destinationName: '',
    contactName: '',
    phone: '',
    pageNo: 1,
    pageSize: 10
})
const tableDataTarget = ref([])
const total = ref(0)

const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    searchTarget();
}
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    searchTarget();
}
const resetTarget = async () => {
    searchForm.value.destinationName = ''
    searchForm.value.contactName = ''
    searchForm.value.phone = ''
    searchForm.value.pageNo = 1
    searchForm.value.pageSize = 10
}
const searchTarget = async () => {
    const res = await transportDestinationHttp.pageList(searchForm.value)
    console.log(res.data)
    if (res.data.code == 200) {
        tableDataTarget.value = res.data.data.records
        total.value = res.data.data.total

    }
}
let ruleFormTarget = ref({
    depId: '',
    destinationName: '',
    contactName: '',
    phone: '',
    address: '',
})
const dialogVisibleTarget = ref(false)
const dialogTypeTarget = ref('')
const dialogTitleTarget = ref('')
const handleAddTarget = () => {
    dialogVisibleTarget.value = true
    dialogTypeTarget.value = 'add'
    dialogTitleTarget.value = '新增'
}
const handleDetailTarget = (index, row) => {
    dialogVisibleTarget.value = true
    dialogTypeTarget.value = 'detail'
    dialogTitleTarget.value = '详情'
    ruleFormTarget.value = { ...row }
    ruleFormTarget.value.depId = row.depId + ''
}
const handleEditTarget = (index, row) => {
    dialogVisibleTarget.value = true
    dialogTypeTarget.value = 'edit'
    dialogTitleTarget.value = '编辑'
    ruleFormTarget.value = { ...row }
    ruleFormTarget.value.depId = row.depId + ''
}
const handleDeleteTarget = (index, row) => {
    ElMessageBox.confirm("确认删除该数据吗？", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            const { data } = await transportDestinationHttp.deleteDestination(row)
            if (data.code == 200) {
                ElMessage({
                    message: "删除成功",
                    type: "success",
                });
                searchTarget()
            }
        })
}
const confirmTarget = async () => {
    if (dialogTypeTarget.value == 'add') {
        const res = await transportDestinationHttp.addDestination(ruleFormTarget.value)
        console.log(res.data)
        if (res.data.code == 200) {
            ElMessage({
                message: "新增成功",
                type: "success",
            });
            dialogVisibleTarget.value = false
            searchTarget()
        }
    } else if (dialogTypeTarget.value == 'edit') {
        const res = await transportDestinationHttp.updateDestination(ruleFormTarget.value)
        console.log(res.data)
        if (res.data.code == 200) {
            ElMessage({
                message: "修改成功",
                type: "success",
            });
            dialogVisibleTarget.value = false
            searchTarget()
        }
    }
}

// 运输单位
//运输单位list
const transportDepNameList = ref([])
const searchUnitList = async () => {
    const res = await transportDepHttp.pageList({})
    console.log(res.data)
    if (res.data.code == 200) {
        transportDepNameList.value = res.data.data.records
    }
}
const transportDepChange = (v) => {
    transportDepNameList.value.forEach((item) => {
        if (item.id == v) {
            ruleFormUnit.value.transportDepName = item.transportDepName;
        }
    });
}
const searchFormUnit = ref({
    destinationName: '',
    contactName: '',
    phone: '',
    pageNo: 1,
    pageSize: 10
})
const tableDataUnit = ref([])
const totalUnit = ref(0)

const handleSizeChangeUnit = (val) => {
    searchForm.pageSize = val;
    searchTarget();
}
const handleCurrentChangeUnit = (val) => {
    searchForm.pageNo = val;
    searchTarget();
}
const resetUnit = async () => {
    searchFormUnit.value.destinationName = ''
    searchFormUnit.value.contactName = ''
    searchFormUnit.value.phone = ''
    searchFormUnit.value.pageNo = 1
    searchFormUnit.value.pageSize = 10
}
const searchUnit = async () => {
    const res = await transportDepHttp.pageList(searchFormUnit.value)
    console.log(res.data)
    if (res.data.code == 200) {
        res.data.data.records.forEach(item => {
            let aptitude = []
            if (item.businessLicense) { aptitude.push('营业执照文件') }
            if (item.roadTransport) { aptitude.push('道路运输经营许可证') }
            if (item.vehicleOperation) { aptitude.push('车辆营运证') }
            item.aptitude = aptitude.join('，')
        })
        tableDataUnit.value = res.data.data.records
        totalUnit.value = res.data.data.total

    }
}
const ruleFormUnitRef = ref()
let ruleFormUnit = ref({
    depId: '',
    transportDep: '',
    transportDepName: '',
    vehicleNumber: '',
    driverNumber: '',
    contactName: '',
    contaphonectName: '',
    businessLicense: '',
    roadTransport: '',
    vehicleOperation: '',
})
const dialogVisibleUnit = ref(false)
const dialogTypeUnit = ref('')
const dialogTitleUnit = ref('')
const handleAddUnit = () => {
    dialogVisibleUnit.value = true
    dialogTypeUnit.value = 'add'
    dialogTitleUnit.value = '新增'
    ruleFormUnit.value.depId = ''
    ruleFormUnit.value.transportDepName = ''
    ruleFormUnit.value.vehicleNumber = ''
    ruleFormUnit.value.driverNumber = ''
    ruleFormUnit.value.contactName = ''
    ruleFormUnit.value.phone = ''
    ruleFormUnit.value.businessLicense = ''
    ruleFormUnit.value.roadTransport = ''
    ruleFormUnit.value.vehicleOperation = ''
}
const handleDetailUnit = (index, row) => {
    dialogVisibleUnit.value = true
    dialogTypeUnit.value = 'detail'
    dialogTitleUnit.value = '详情'
    ruleFormUnit.value = { ...row }
    ruleFormUnit.value.depId = row.depId + ''
    if (ruleFormUnit.value.businessLicense) {
        getFileInfoById(ruleFormUnit.value.businessLicense, 'businessLicense')
    } else {
        fileListBusinessLicense.value = []
    }
    if (ruleFormUnit.value.roadTransport) {
        getFileInfoById(ruleFormUnit.value.roadTransport, 'roadTransport')
    } else {
        fileListRoadTransport.value = []
    }
    if (ruleFormUnit.value.vehicleOperation) {
        getFileInfoById(ruleFormUnit.value.vehicleOperation, 'vehicleOperation')
    } else {
        fileListVehicleOperation.value = []
    }
}
const handleEditUnit = (index, row) => {
    dialogVisibleUnit.value = true
    dialogTypeUnit.value = 'edit'
    dialogTitleUnit.value = '编辑'
    ruleFormUnit.value = { ...row }
    ruleFormUnit.value.depId = row.depId + ''
    if (ruleFormUnit.value.businessLicense) {
        getFileInfoById(ruleFormUnit.value.businessLicense, 'businessLicense')
    } else {
        fileListBusinessLicense.value = []
    }
    if (ruleFormUnit.value.roadTransport) {
        getFileInfoById(ruleFormUnit.value.roadTransport, 'roadTransport')
    } else {
        fileListRoadTransport.value = []
    }
    if (ruleFormUnit.value.vehicleOperation) {
        getFileInfoById(ruleFormUnit.value.vehicleOperation, 'vehicleOperation')
    } else {
        fileListVehicleOperation.value = []
    }
}
const getFileInfoById = async (id, type) => {
    const { data } = await fileInfoHttp.fileInfoGetById(id)
    if (data.code == 200) {
        if (type == 'businessLicense') {
            fileListBusinessLicense.value[0] = data.data
        }
        if (type == 'roadTransport') {
            fileListRoadTransport.value[0] = data.data
        }
        if (type == 'vehicleOperation') {
            fileListVehicleOperation.value[0] = data.data
        }
    }
}
const handleDeleteUnit = (index, row) => {
    ElMessageBox.confirm("确认删除该数据吗？", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            const { data } = await transportDepHttp.deleteTransportDep(row)
            if (data.code == 200) {
                ElMessage({
                    message: "删除成功",
                    type: "success",
                });
                searchUnit()
            }
        })
}
const confirmUnit = async () => {
    if (dialogTypeUnit.value == 'add') {
        const res = await transportDepHttp.addTransportDep(ruleFormUnit.value)
        console.log(res.data)
        if (res.data.code == 200) {
            ElMessage({
                message: "新增成功",
                type: "success",
            });
            dialogVisibleUnit.value = false
            searchUnit()
        }
    } else if (dialogTypeUnit.value == 'edit') {
        const res = await transportDepHttp.updateTransportDep(ruleFormUnit.value)
        console.log(res.data)
        if (res.data.code == 200) {
            ElMessage({
                message: "修改成功",
                type: "success",
            });
            dialogVisibleUnit.value = false
            searchUnit()
        }
    }
}
const uploadFileList = async (params, type) => {
    const res = await fileInfoHttp.fileInfoUpload(params)
    console.log(res.data)
    if (res.data.code == 200) {
        ruleFormUnit.value[type] = res.data.data.id
    }
}
// 营业执照文件
const fileListBusinessLicense = ref([])
const handleRemoveBusinessLicense = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles, '1111111')
    fileListBusinessLicense.value = []
    ruleFormUnit.value.businessLicense = ''
}
const handleSuccessBusinessLicense = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles, '2222222')
}
// 道路运输经营许可证
const fileListRoadTransport = ref([])
const handleRemoveRoadTransport = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    ruleFormUnit.value.roadTransport = ''
}
const handleSuccessRoadTransport = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
// 车辆营运证
const fileListVehicleOperation = ref([])
const handleRemoveVehicleOperation = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    ruleFormUnit.value.vehicleOperation = ''
}
const handleSuccessVehicleOperation = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const dialogImageUrl = ref('')
const dialogPriviewVisible = ref(false)
const handlePictureCardPreview = (uploadFile) => {
    console.log(uploadFile, '11111')
    dialogImageUrl.value = uploadFile.url
    dialogPriviewVisible.value = true
}
onMounted(() => {
    search()
    searchTarget()
    searchUnit()
    searchUnitList()
})
</script>

<style scoped lang="less">
.contant {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding-bottom: 16px;
    :deep(.el-tabs__nav) {
        padding: 0 20px !important;
    }
    :deep(.el-tabs__item) {
        font-weight: 400 !important;
        font-size: 14px;
    }
    :deep(.el-tabs__nav-wrap:after) {
        height: 1px;
    }
    :deep(.el-tab-pane) {
        padding: 0;
    }
    .operatingArea {
        padding: 0 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .addBtn {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: 10px;
    }
}
.dialogContent {
    .sludgemodel {
        // margin-bottom: 10px;
        .modelTitle {
            font-size: 16px;
            line-height: 18px;
            padding-left: 10px;
            border-left: 3px solid #38acf5;
            margin-bottom: 10px;
            font-weight: 500;
            .addCar {
                margin-left: 10px;
            }
        }
    }
    .carInfo {
        .carItem {
            padding: 0 14px;
            .carItemName {
                font-size: 12px;
                color: #666;
                line-height: 24px;
                border-bottom: 1px solid #eee;
                margin-bottom: 10px;
                position: relative;
                .deleteCar {
                    position: absolute;
                    right: 0;
                    top: 2px;
                    width: 14px;
                    height: 18px;
                    font-size: 10px;
                }
            }
        }
    }
    .hiddenAddPic {
        :deep(.el-upload--picture-card) {
            display: none;
        }
    }
}
.equipmentPagination {
    justify-content: right;
    margin-top: 10px;
}
</style>
